<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="content">溯源详情</block>
		</cu-custom>
		<scroll-view scroll-y="true">
			<view class="main">
				<view class="desc">
					<view class="descLabel title">
						<text class="cuIcon-title text-orange"></text>
						原产地简介
					</view>
					<view class="descContent">
						{{origin.originContent}}
					</view>
				</view>

				<view class="show">
					<view class="showLabel title">
						<text class="cuIcon-title text-purple"></text>
						原产地展示
					</view>
					<view class="showNav">
						<carousel :img-list="imageList" url-key="url" />
					</view>
				</view>

				<view class="address" style="margin-bottom: 50upx;">
					<view class="addressLabel title">
						<text class="cuIcon-title text-blue"></text>
						原产地定位
					</view>
					<view class="map" style="display: flex; justify-content: center;">
						<map :scale="13" :latitude="latitude" :longitude="longitude" :markers="markers" style="width: 700upx; height: 300upx;"></map>
					</view>
				</view>

			</view>
		</scroll-view>
	</view>
</template>

<script>
	import carousel from '../../components/vear-carousel.vue'
	import {
		getOriginInfoByGoodsId
	} from '../../api/originAPI.js'
	export default {
		components: {
			carousel
		},
		data() {
			return {
				latitude: '',
				longitude: '',
				origin: {
					"originImages": ";",
					"originId": 8,
					"originContent": "",
					"originAddress": "",
					"originPosition": "",
					"originGoodsId": ""
				},
				markers: [

				],
				imageList: [
					// {
					// 	index: 1,
					// 	url: 'http://www.2306.tech/CCShop/images/origin/K902/1.jpg'
					// },
					// {
					// 	index: 2,
					// 	url: 'http://www.2306.tech/CCShop/images/origin/K902/2.jpg'
					// },
					// {
					// 	index: 3,
					// 	url: 'http://www.2306.tech/CCShop/images/origin/K902/3.jpg'
					// },
					// {
					// 	index: 4,
					// 	url: 'http://www.2306.tech/CCShop/images/origin/K902/4.jpg'
					// },
					// {
					// 	index: 5,
					// 	url: 'http://www.2306.tech/CCShop/images/origin/K902/5.jpg'
					// }

				]
			}
		},
		methods: {

		},
		onLoad(params) {
			
			console.log("params: ", params);
			if (null == params.id) {
				params.id = "FA0257"
			}
			uni.showLoading({
				title: '加载中...'
			})
			const goodsId = params.id;
			console.log("goodsId: ", goodsId);
			getOriginInfoByGoodsId(params.id).then(resp => {
				console.log("resp: ", resp);
				this.origin = resp
				const layout = this.origin.originPosition.split(";")
				this.latitude = layout[1]
				this.longitude = layout[0]
				this.markers = [{
					id: '1',
					latitude: this.latitude,
					longitude: this.longitude,
					iconPath: '../../static/location.png',
					callout: {
						content: this.origin.originAddress
					}
				}]
				const imgList = this.origin.originImages.split(";")
				const arr = []
				imgList.forEach((s,index)=>{
					if ('' != s) {
						var img = {index:index,url:getApp().globalData.serverUrl + s}
						arr.push(img)
					}
					
				})
				this.imageList = arr
				uni.hideLoading()
			})
			
			


		}
	}
</script>

<style>
	@import url("./origin.css");
</style>
